<template>
    <h1 style="text-align: center;margin-top: 90px;">请选择床位</h1>
    <div>
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 800px; margin: 40px auto;">
            <el-button v-for="patient in list" :key="patient.id"
                style="width: 150px; height: 60px; background-color:white;" @click="toSummaryTwo(patient)">
                {{ patient.WardCode }}房间 {{ patient.BedCode }}床 {{ patient.name }}
            </el-button>
        </div>
    </div>
</template>


<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

interface Patient {
    id: number;
    patientCode: string;
    name: string;
    WardCode: string;
    BedCode: string;
}

let router = useRouter();
const list = ref<Patient[]>([]);

const toSummaryTwo = (patient: Patient) => {
    router.push({
        path: "/PatientTwo",
        query: {
            number: patient.patientCode,
            name: patient.name,
            patientCode: patient.patientCode
        }
    })
}

const getPatient = () => {
    axios({
        method: "get",
        url: "http://localhost:9991/api/DoctorManage/GetPatients",
    })
    .then(res => {
        console.log('获取到的病人数据:', res.data.data);
        if (Array.isArray(res.data.data)) {
            list.value = res.data.data.map((patient:any) => ({
                ...patient,
                WardCode: patient.wardAreaCode || '未知',
                BedCode: patient.bedCode || '未知',
                name: patient.name || '未知',
                patientCode: patient.patientCode || ''
            }));
        } else {
            console.error('后端返回的数据格式不是数组');
        }
    })
    .catch(error => {
        console.error('获取病人数据失败:', error);
    });
}

onMounted(() => {
    getPatient();
})
</script>

<style scoped>
.el-button {
    margin: 0 auto;
}
</style>